<template>
    <view class="invitation">
			<view class="tab-btn-box flex width100  bg-white" v-if="show">
				<view class="tui-alert-mask" :class="[show_obj?'tui-alert-mask-show':'']"  @click="close()" >
				    <view :style="{width:width?width:'100%'}" style="position: absolute;top: 0;right: 0;">
				        <view>
				            <image src="@/static/user/point_bg.png" style="width: 100%;" mode="widthFix" />
				        </view>
				        <view @click="close" style="text-align: center;">
				            <image src="@/static/user/point_btn.png" style="width: 60%;" mode="widthFix" />
				        </view>
				    </view>
				</view>
			</view>
<!--        <view class="invitation-item">
            <view class="imgs">
                
            </view>
            <view class="text">
                扫描二维码，乐享畅卡回收服务
            </view>
            <image src="../../static/erm.png" class="erm"></image>

        </view> -->
				<view  class="slide-main">
					<swiper :current='swiperIndex' @change="swiperCh" class="sider-swiper">
						<swiper-item v-for="(item,index) in swiperList" :key='index' class="text-center">
							<image :src="item.url"  class="fenxiang-img"  mode="aspectFit"  show-menu-by-longpress=true></image>
						</swiper-item>
					</swiper>
				</view>
        <view class="hyou">
            <view class="hyou-left" hover-class="itemActive" @click="share">
                <!-- <image src="/static/invitation2@2x.png" class="invitation2"></image> -->
                <view class="invitation2">
                    
                </view>
                <view class="text" >
                 分享好友   
                </view>
            </view>
						<!-- #ifdef H5 -->
            <view class="hyou-left" hover-class="itemActive1" @click="copy">
                <view class="invitation3">
                    
                </view>
                  <!--  <image src="/static/invitation3@2x.png" class="invitation2"></image> -->
                <view class="text">
                 分享链接   
                </view>
            </view>
						<!-- #endif -->
        </view>
    </view>
</template>

<script>
	import * as userApi from '@/api/user'
	import config from '@/config'
	export default{
		data(){
			return{
				imgList: [],
				yq:"",
				swiperList:[],
				swiperIndex:0,
				phone:"",
				show_obj:false,
				show:'1',
				width:"600rpx",
			}
		},
		onShow() {
			// #ifdef H5
			if(this.$fxLink.checkBrowser()){
				this.getShareData()
			}
			// #endif
			this.yq = uni.getStorageSync('userInfo').user_id
			this.phone = uni.getStorageSync('userInfo').phone
			this.getData()
		},
		methods:{
			swiperCh(){
				
			},
			download(){
				let _this = this
				// #ifdef H5 || MP-BAIDU
				_this.$toast("长按即可保存图片或转发")
				// #endif
				// #ifdef MP-WEIXIN || MP-KUAISHOU || APP-PLUS || MP-ALIPAY
				uni.downloadFile({
					url:this.swiperList[this.swiperIndex],
					success: (resFile) => {
								uni.saveImageToPhotosAlbum({
									filePath:resFile.tempFilePath,
									success: (res) => {
										return uni.showToast({
											title: '保存成功',
										});
									}
								})
					},
					fail: (res) => {
						return uni.showToast({
							title: '请长按图片保存',
							icon:"none"
						});
					},
				});
				// #endif
			},
			getShareData(){
				let _this = this
				let data = {
					title:_this.phone+ "邀请您来！"+ this.$name +"话费卡，E卡，加油卡通通回收",
					desc:"在线回收话费卡、加油卡、各类游戏点卡、商超购物卡、电商卡、美食劵、影音劵、价格美丽，更有分销系统",
					link:config.apiUrl+'/h5',
					imgUrl:"https://www.tuantuanshou.com/default.png"
				}
				let url =  location.href.split('#')[0]
				this.$wechat.share(data,url)
			},
			getData(){
				userApi.sharePoster({
					wxapp_id: this.$wxapp_id,
				}).then(res => {
					let data = res.data
					this.swiperList = data.map((item, index) => {
						return {
							id: index + 1,
							url: item.image
						}
					})
				})
			},
			copy(){
				let _this = this
				uni.setClipboardData({
					data:config.addWxUrl+'?yq='+this.yq,
					success: (res) => {
						_this.$success("复制成功")
					},
					fail: () => {
						_this.$toast("复制失败")
					}
				})
			},
			share(){
				// #ifdef H5
				this.show_obj = true
				// #endif
				// #ifdef MP-BAIDU
				this.openShare()
				// #endif
				// #ifdef MP-TOUTIAO
				this.openShare_TOUTIAO()
				// #endif
			},
			close(){
				this.show_obj = false
			},
			openShare_TOUTIAO(ShareOption){
				return {
					title: '这是要转发的小程序标题',
					desc: '这是默认的转发文案，用户可以直接发送，也可以在发布器内修改',
					success () {
						console.log('转发发布器已调起，并不意味着用户转发成功，微头条不提供这个时机的回调');
					},
					fail () {
						console.log('转发发布器调起失败');
					}
				}
			},
			openShare(){
				swan.openShare({
					title: '智能小程序示例',
					content: '世界很复杂，百度更懂你',
					path: '/pages/index/index?yq='+this.yq,
					imageUrl: 'https://smartprogram.baidu.com/docs/img/logo_new.png',
					success:res =>{
					}
				})
			},
		}
	}
</script>


<style lang="scss">
    .itemActive{
        .invitation2{
              transform:scale(1.1)
        }
    }
    .itemActive1{
        .invitation3{
              transform:scale(1.1)
        }
    }
    .invitation{
        height: calc(100vh );
        background-color: #F3FAFF;
        .invitation-item{
            position: relative;
            padding-top: 120rpx;
            text-align: center;
            // display: flex;
            justify-content: center;
            .imgs{
                width: 600rpx;
                height: 800rpx;
                background: url('../../static/invitation1@2x.png') no-repeat;
                background-size: 600rpx 800rpx; 
            }
            .text{
                position: absolute;
                left:calc(50% - 420rpx + 210rpx);
                bottom: 88rpx;
                width: 420rpx;
                height: 42rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 30rpx;
                color: #ABB0B2;
                line-height: 35rpx;
                text-align: center;
                font-style: normal;
                text-transform: none;
            }
            .erm{
                width: 268rpx;
                height: 268rpx;
                position: absolute;
                left:calc(50% - 268rpx + 134rpx);
                bottom: 170rpx;
            }
        }
        .hyou{
            margin-top: 62rpx;
            display: flex;
            justify-content: center;
            .hyou-left{
                position: relative;
                .invitation2{
                    position: absolute;
                      transition:  0.2s linear;
                    width: 220rpx;
                    height: 80rpx;
                   background: url('../../static/invitation2@2x.png') no-repeat;
                   background-size: 220rpx 80rpx;  
                }
                .invitation3{
                    position: absolute;
                       transition:  0.2s linear;
                     width: 220rpx;
                     height: 80rpx;
                    background: url('../../static/invitation3@2x.png') no-repeat;
                    background-size: 220rpx 80rpx;  
                }
                .text{
                     position: relative;
                    width: 220rpx;
                    height: 80rpx;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 30rpx;
                    color: #FFFFFF;
                    line-height: 80rpx;
                    text-align: center;
                    font-style: normal;
                    text-transform: none;
                }
            }
        }
    }
	.tui-alert-mask1 {
	    position: fixed;
	    width: 100%;
	    height: 100%;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    background-color: rgba(0, 0, 0, 0.8);
	    z-index: 99996;
	    transition: all 0.3s ease-in-out;
	    opacity: 0;
	    visibility: hidden;
	}
	.tui-alert-mask {
	    position: fixed;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    z-index: 1110;
	    opacity: 0;
	    outline: 0;
	    text-align: center;
	    -ms-transform: scale(1.185);
	    transform: scale(1.185);
	    backface-visibility: hidden;
	    perspective: 2000upx;
	    background: rgba(0, 0, 0, 0.6);
	    transition: all 0.3s ease-in-out 0s;
	    pointer-events: none;
	}
	.tui-alert-mask-show {
	    opacity: 1;
	    transition-duration: 0.3s;
	    -ms-transform: scale(1);
	    transform: scale(1);
	    overflow-x: hidden;
	    overflow-y: auto;
	    pointer-events: auto;
	}
	.tui-alert-mask-show1 {
	    visibility: visible;
	    opacity: 1;
	}
	.fenxiang-img{
		height: 70vh;
	}
	.slide-main{
		padding-top: 80rpx;
	}
	.sider-swiper{
		height: 70vh;
	}
	.share-image{
		width: 2rem;
		height: 2rem
	}
	.share-button{
		background-color: transparent;
		border: none;
	}
	.share-button::after{
		border:none;
	}
	.share-title{
		margin-top: -40rpx;
	}
</style>